/**
2021-11-26
登录界面：
  用户进入该界面首先获取验证码图片，服务器生成验证码图片后会将验证码图片存储到session中，
  用户填写用户名、密码、验证码
  服务器对用户信息进行校验，首先判断验证码信息是否正确，然后判断用户名和密码是否匹配
技术点：
  md5加密、spring security登录验证、spring security验证码验证、生成验证码、session
 */
<template>
  <div id="body">
    <div>
      <img :src="imgUrl" class="background" />
    </div>
    <div id="loginForm">
      <div style="text-align:center;margin-bottom:15px">登录信息</div>
      <el-form :model="formLogin" ref="formLogin">
        <el-form-item style="margin-bottom:5px" prop="userName">
          <el-input v-model="formLogin.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:5px" prop="phone">
          <el-input v-model="formLogin.phone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:5px" prop="userReal">
          <el-input v-model="formLogin.userReal" placeholder="请输入用户真实姓名" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:5px" prop="password">
          <el-input v-model="formLogin.password" placeholder="请输入密码" show-password auto-complete="new-password"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:5px" prop="sex">
          <el-select v-model="formLogin.sex" :placeholder="性别">
            <el-option label="女" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-button :plain="true" @click="register()" id="button_login">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    return {
      formLogin: {},
      imgUrl: require("../assets/login_background.png"),
    };
  },
  methods: {
    // 点击注册按钮
    register() {
      this.COMMON.httpPost(
        this,
        "userOperation/register",
        this.formLogin,
        (result) => {
          if (result.result == "SUCCESS") {
            //将用户信息存储到本地
            localStorage.user = JSON.stringify(result.data || []);
            //进入主界面
            this.$router.push({ path: "/" });
          } else {
            this.changeCode();
            this.formLogin.password = "";
            this.formLogin.verCode = "";
          }
        },
        (result) => {}
      );
    },
  },
};
</script>



<style>
body {
  margin: 0px;
  padding: 0;
}
#body {
  height: 100%;
  width: 100%;
}
#loginForm {
  background-color: white;
  margin: auto;
  width: 20%;
  height: 40%;
  position: relative;
  top: 50%; /*偏移*/
  transform: translateY(-50%);
  box-shadow: 10px 10px 10px #7b94f9;
  padding-top: 20px;
  padding-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 10px;
}
#button_login {
  width: 100%;
  border: 1px solid #879399;
}
.background {
  height: 100%;
  width: 100%;
  position: absolute;
}
.el-form-item__label {
  color: black;
}
</style>